<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count:{{count}}</p>
        <child></child>
    </div>
    <script src="vue.js"></script>
    <script src="my-vuex.js"></script>
    <script>
        //使用Vuex插件
        Vue.use(Vuex);
        //创建一个 Vuex仓库
        const store = new Vuex.Store({
            state:{count:0},//定义仓库中的初始状态
        });
        var vm = new Vue({
            el:'#app',
            //提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
            store,//store选项
            computed:{
                count(){
                    return this.$store.state.count;
                }
            },
            components:{
                child:{
                    template:`<div>childCount:{{childCount}}</div>`,
                    computed:{
                        childCount(){
                            return this.$store.state.count;
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>